<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐听</title>
    <!-- 引入页面样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <style>
        .aaa{
            width: 30px;
            height: 30px;
            z-index: 1000;
            background-color: yellow;
        }
        button{
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        
        <!-- 音乐播放器主体区域 -->
        <div class="play_wrap" id="player">
            <div class="title">
                <span>乐听</span>
                <!-- 搜索歌曲 -->
                <input type="text" v-model="query" @keyup.enter="searchMusic"
                placeholder="请输入你想听的歌曲/歌手">
                <div class="icon_search" @click="searchMusic"></div>
            </div>

            <div class="centent_con">
                <!-- 搜索歌曲列表 -->
                <div class="song_wrap">
                    <ul class="song_list">
                        <li v-for="item in musicList" :key="item.id">
                            <a href="javascript:;" @click="playMusic(item.id)"></a>
                            <b>{{item.name}}</b>
                            <span><i v-if="item.mvid!=0" @click="playMV(item.mvid)"></i></span>
                     </li>
                </div>
                <!-- 歌曲封面 -->
                <img :src="musicCover" alt="" class="img">
                <!-- 歌曲评论 -->
                <div class="song_pinglun">
                    <h5>热门留言</h5>
                    <ul class="pinglun_list">
                        <li v-for="item in comment" :key="item.id">
                            <a href="javascript:;"><img :src="item.user.avatarUrl" alt=""></a>
                            <b>{{item.user.nickname}}</b>
                            <p>
                                <i>{{item.content}}</i>
                            </p>
                        </li>
                
                    </ul>
                </div>
                
            </div>
            <!-- 歌曲播放 -->
            <div class="player_con">
                <audio :src="musicURL" controls autoplay></audio>
            </div>

            <div class="video_con" v-show="isShow" style="display: none;">
                <video :src="MV" controls autoplay></video>
                <div class="mask" @click="closeMv"></div>
              </div>
            
        </div>
    </div>
    
</body>

<!-- 引入vue的在线地址 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
<!-- 引入axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入main.js文件 -->
<script src="../js/main.js"></script>
</html>